﻿<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name=screen-orientation content=portrait>
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=format-detection content="telephone=no">
    <meta name=full-screen content=yes>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=renderer content=webkit>
    <meta http-equiv=Pragma content=no-cache>
    <meta http-equiv=Cache-Control content=no-cache>
    <meta http-equiv=Expires content=0>
    <meta name=x5-fullscreen content=true>
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta content=yes name=apple-touch-fullscreen>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta content="modeName=750-12" name=grid>
    <title>下载提示</title>
    <script src="js/flexible.js" ></script>   
	</head>
	<style type="text/css">
body{
	margin: 0px;
	padding: 0px;
}
.download {
  text-align: center;
  min-height: 100vh;
  max-width: 10rem;
  background:white;
  padding-top: 2rem;
  box-sizing: border-box;
  margin: 0 auto;
}
.mask-box{
	height: 2rem;
	width: 100%;
	position: relative;
	box-sizing: border-box;
    font-size: 0.2rem  !important; 
}
.mask-box p{
    padding-top:20px;
    font-size: 0.35rem  !important; 
}
.logo {
  width: 4rem;
  height: 4rem;
}
.title p{
	font-size: 0.4533rem;
	color: #333;
	margin-top: 1rem;
}
.btn-box{
	width: 100%;
	text-align: center !important; 
}
.store,.small{
	background: #D09F6A;
	border: none;
	color: #fbfbfb;
	width: 6rem;
	height: 1rem;
	border-radius: 0.1333rem;
	font-size: 0.4rem;
	display: inline-block;
}
.small{
	width: 5rem;
	display: none;
}
.mask{
	width: 100%;
	min-height: 100vh;
	z-index: 10;
	background: black;
	position: fixed;
	left: 0px;
	top: 0px;
	opacity: 0.3;
	display: none;
	text-align: center;
}
.panel{
	display: none;
	width: 6rem;
	height: 4rem;
	background: white;
	z-index: 11;
	position: fixed;
	left: 50%;
	margin-left: -3rem;
	top:50%;
	margin-top: -2rem;
	border-radius:6px ;
	overflow: hidden;
}
#title{
	height: 3rem;	
	font-size: 0.4rem;
	color: #333333;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-top: 1rem;
	box-sizing: border-box;
}

.ref-btn{
 text-decoration: none;
 color: #333333;
 display: inline-block;
 width: 46%;
 height: 1rem;
 line-height: 1rem;
 font-size: 0.48rem;
}
.btn-confirm{
	border-left: none;
	width: 100%;
	color: #fe535b !important;
}
.title-close{
	position: absolute;
	display: inline-block;
	right: 0.2rem;
	top: 0rem;
	color: #333333 !important; 
	font-size: 0.6rem;
}
a{
	text-decoration:none
}

.btn-android{
	display: none;
}
#panel-apple a{
	display: inline-block;
	width:48% !important;

}
#iphone-confirm{
	border-left: 1px solid #EEEEEE !important;
}
#panel{
	display: none;
}
</style>
	<body>
		<div class="download">
		    <div class="title">
		      <img class="logo" src="img/download.png">    	
              <div class="mask-box">
                  <p>权威养生专家，为你开启生活的味道 </p>
              </div>      
		    </div>  
		    <div class="btn-box">
	    	 	<button class="small" onclick="go()" >直接下载</button>
				<a onclick="go()" class="apple" >
		    	 	<button  class="store">去app store下载</button>
	    	 	</a>
		    </div>
		    <div class="mask" id="mask" onclick="closeMask()"></div>
		    <!--android弹出提示-->
		    <div class="panel" id="panel">
		    		<div id="title">
		    			    你选择的是普通浏览器下载     
		    		</div>
		    		<div >
		    			<a href="http://gdtvapp.weixinmvp.top/upload/uploadApk/app-release.apk" class="ref-btn btn-confirm" onclick="closeMask()"><!--http://192.168.2.64:9002/page/android/app-release.apk-->
		    				确定
		    			</a>		    			
		    		</div>
		    </div>
		    <!--微信打开提示-->
		    <div class="panel" id="panel-two">
		    		<div id="title">
		    			    请在右上角选择在浏览器打开                       
		    		</div>
		    		<div >		    			
		    			<a onclick="closeMask()" class="ref-btn btn-confirm">确定</a>
		    		</div>
		    </div>
		  </div>
	</body>
	<script type="text/javascript">
		window.onload=function(){	//下载按钮根据类型的判断	
			var u_agent = navigator.userAgent; 		
			var mask=document.getElementById('mask');			
			var smallBtn=document.getElementsByClassName('small')[0];//安卓下载按钮的判断 
			var storeBtn=document.getElementsByClassName('apple')[0];//苹果app store下载按钮的判断 
			if(u_agent.indexOf('Android') > -1 || u_agent.indexOf('Linux') > -1){//android终端或者uc浏览器			    											
				storeBtn.style.display='none'
				smallBtn.style.display='inline-block'
			}	
			if(u_agent.indexOf('iPhone') > -1 ||u_agent.indexOf('Mac') > -1){//iPhone或者QQ HD浏览器
				storeBtn.style.display='inline-block'
				smallBtn.style.display='none'
				window.location.href='https://itunes.apple.com/us/app/id1296164550'
			}
				if(u_agent.indexOf("Firefox")>-1){ //谷歌、火狐等其他浏览器
					storeBtn.style.display='none'
					smallBtn.style.display='inline-block'			      
			 	}else if(u_agent.indexOf("Chrome")>-1){ 
				 	storeBtn.style.display='none'
					smallBtn.style.display='inline-block'				    
			 	}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
				 	storeBtn.style.display='none'
					smallBtn.style.display='inline-block'				    
			 	}
		}
		function go(){ //弹出框根据各类型判断
				var u_agent = navigator.userAgent; 				
				var ua = navigator.userAgent.toLowerCase();//判断微信浏览器				
				var mask=document.getElementById('mask');
				var panel=document.getElementById('panel');//android浏览器			
				var panelTwo=document.getElementById('panel-two');//微信提示面板		
				if(ua.match(/MicroMessenger/i)=="micromessenger") {//如果是微信浏览器
					mask.style.display='block';
					panelTwo.style.display='block'
				}else{
					if(u_agent.indexOf('iPhone') > -1 ||u_agent.indexOf('Mac') > -1){									 
					 window.location.href='https://itunes.apple.com/us/app/id1296164550'										
					}
				}									
				if(u_agent.indexOf('Android') > -1 || u_agent.indexOf('Linux') > -1){//android终端或者uc浏览器			    							
					panel.style.display='block'					
					mask.style.display='block'					
				}
				
				if(u_agent.indexOf("Firefox")>-1 && u_agent.indexOf('Android') ==-1){ //谷歌、火狐等其他浏览器
					panel.style.display='none'	
					mask.style.display='none';
                    window.location.href ='http://gdtvapp.weixinmvp.top/upload/uploadApk/app-release.apk' 
				}
				if(u_agent.indexOf("Chrome")>-1 &&u_agent.indexOf('Android')==-1){
					panel.style.display='none'
					mask.style.display='none';
                    window.location.href ='http://gdtvapp.weixinmvp.top/upload/uploadApk/app-release.apk'
				}
				if(u_agent.indexOf("MSIE")>-1 && u_agent.indexOf("Trident") >-1 &&u_agent.indexOf('Android')==-1){
					panel.style.display='none'
					mask.style.display='none';
                    window.location.href ='http://gdtvapp.weixinmvp.top/upload/uploadApk/app-release.apk'  
				}		
			}							
		function closeMask(){//点击隐藏面板
				var mask=document.getElementById('mask');
				var panel=document.getElementById('panel');//Android提示面板
				var panelTwo=document.getElementById('panel-two');//微信提示面板	
				mask.style.display='none';
				panel.style.display='none';
				panelTwo.style.display='none'
		}
	</script>
</html>
